<!--
动画
    - animation
    - 动画也是CSS3中最具颠覆性的特征之一
    - 可设置多个节点，精准控制一个或一组动画，实现复杂效果
    - 相对于过渡，动画可以实现更多变化、更多控制，实现连续自动播放等
    - 页面一加载出来，不需要手动触发，动画效果会自动执行

制作动画
    先定义，再调用。
    类似定义类选择器一样，先声明定义出来，然后再给指定的标签元素使用。
        定义    @keyframes 动画名{}
        调用    animation-name: 动画名;
                animation-duration: 持续时间;    // 必须设置时间
    ----------------------------------------------------
    @keyframes myAnimation {      @keyframes 动画名称 {
        0%{}                          动画序列1
        25%{}                         动画序列2
        75%{}                         ...
        100%{}                        动画序列n
    }                             }
    ----------------------------------------------------
    关键帧
        keyframes
    动画序列
        0%    动画开始
        ...   任意多个序列
        100%  动画完成
    百分比，最好是整数，代表整个动画的时间划分，即某个时间节点，也叫作动画序列
    在不同的序列中设置不同的CSS样式，就能实现从当前样式逐渐变化为新样式的效果。
        from  等同于  0%
        to    等同于  100%
    ----------------------------------------------------
注意
    1）0%或from省略时，就是默认的原始状态，毕竟动画是从0s开始
    2）transform: translate(x,y); 参照点是盒子自身，不是上一个动画序列的位置
    3）动画序列、持续时间、速度曲线，都会影响某一段动画效果的变化速度
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* 1、定义动画 */
  @keyframes moveMyself {
    /* from {
    } */
    10% {
      transform: translateX(1000px);
      /* transform: translate(1000px, 0); */
    }
    50% {
      transform: translate(1000px, 500px);
    }
    60% {
      transform: translateY(500px);
      /* transform: translate(0, 500px); */
    }
    to {
      transform: none;
      /* transform: translate(0); */
      /* transform: translate(0, 0); */
    }
  }
  div {
    width: 100px;
    height: 100px;
    background-color: orangered;
    /* 2、调用动画 */
    animation-name: moveMyself;
    animation-duration: 5s;
  }
</style>

<div></div>
